.professional-cont {
	height: 100vh;
	width: 100vw;
	background: #f8f8f8;

	.professional-bg {
		width: 100%;
		height: 200px;
		position: relative;

		.bg-img {
			width: 100%;
			height: 100px;
		}

		.title {
			position: absolute;
			left: 50%;
			top: 50px;
			transform: translate(-50%, -50%);
			font-size: 24px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;

			.en {
				font-size: 14px;
				margin-top: 10px;
				font-weight: 300;
			}
		}
	}

	.list {
		padding: 15px;
		position: absolute;
		top: 100px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.list-item {
			width: 165px;
			background: #FFFFFF;
			height: 80px;
			border-radius: 10px;
			overflow: hidden;
			position: relative;
			margin-bottom: 15px;
			display: flex;
			align-items: center;

			&::before {
				position: absolute;
				left: 0;
				content: '';
				width: 3px;
				height: 80px;
				background: #047BFC;
			}

			.icon-book {
				width: 24px;
				height: 24px;
				margin-left: 13px;
				margin-right: 10px;

			}

			.course-title {
				flex: 1;
				margin-right: 21px;
				font-size: 16px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #333333;
				display: flex;
				align-items: center;

				.title {
					overflow: hidden;
					-webkit-line-clamp: 3;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
}